<template>
  <div class="recommend">
    <Title>热门推荐</Title>
    <Loading v-if="musicList.length <= 0" />
    <keep-alive>
      <ul class="musicList">
        <router-link
          v-for="msc in musicList"
          :key="msc.id"
          :to="{ path: `/playlist/${msc.id}` }"
          tag="li"
          @click="isShowrcm"
        >
          <div class="pic">
            <img :src="msc.picUrl" />
            <span>{{ msc.playCount | formatNum }}</span>
          </div>
          <p>{{ msc.name }}</p>
        </router-link>
      </ul>
    </keep-alive>
    <Title>最新音乐</Title>
    <Loading v-if="newSongList.length <= 0" />
    <MusicItem :newSongList="newSongList"></MusicItem>
  </div>
</template>

<script>
import Title from "../components/Title";
import MusicItem from "../components/MusicItem";
import Loading from "../components/Loading";
export default {
  name: "Recommend",
  components: {
    Title,
    MusicItem,
    Loading,
  },
  data() {
    return {
      musicList: [],
      newSongList: [],
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.$http
        .get("/personalized?limit=6")
        .then((data) => {
          vm.musicList = data.data.result;
        })
        .catch((error) => {
          console.log(error);
        });
      vm.$http
        .get("/personalized/newsong")
        .then((data) => {
          vm.newSongList = data.data.result;
        })
        .catch((error) => {
          console.log(error);
        });
    });
  },
  filters: {
    formatNum(value) {
      return (value / 10000).toFixed(1) + "万";
    },
  },
  methods: {
    isShowrcm(){
      // this.$root.playingMusic.isRcmd = false;
      console.log(this.$root.playingMusic.isRcmd);
    }
  },
};
</script>
<style lang="less" scoped>
.recommend{
  margin-bottom: 50px;
  ul.musicList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    li {
      width: 33%;
      .pic {
        position: relative;
        img {
          display: block;
          width: 100%;
        }
        span {
          position: absolute;
          top: 2px;
          right: 3px;
          color: white;
          text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        }
      }
      p {
        word-wrap: nowrap;
      }
    }
  }
}
</style>
